<template>
  <div class="top">
    <div v-for="item in cate" :key="item.cateName">
      <h4>{{ item.cateName }} <i class="iconfont icon-youjiantou"></i></h4>
      <ul>
        <li
          @click="$router.push({ path: '/goodDetail', query: { id: i.id } })"
          v-for="(i, iIndex) in item.detail"
          :key="iIndex"
        >
          <img :src="i.image_url" />
          <p>{{ i.name }}</p>
        </li>
      </ul>
    </div>
    <!-- <div >
      <h4>新书上架 <i class="iconfont icon-youjiantou"></i></h4>
      <ul>
        <li @click="$router.push({ path: '/goodDetail' })">
          <img src="../../assets/images/b3.jpg" />
          <p>窝嫩蝶</p>
        </li>
        <li @click="$router.push({ path: '/goodDetail' })">
          <img src="../../assets/images/b3.jpg" />
          <p>窝嫩蝶</p>
        </li>
      </ul>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      cate: [
        {
          cateId: 1,
          cateName: "图书畅销榜",
          detail: [
            {
              id: "29223776",
              trace_id:
                "product_trace=00000000614ae0a30067f9b40000000001bdeb60",
              stock: 1,
              total_review_count: "2793",
              score: 5,
              stars: {
                full_star: 5,
                has_half_star: false,
              },
              name: "一把刀，千个字",
              subname: "王安忆重磅新作，登顶《收获》长篇小说榜。",
              authorname: "王安忆",
              promotype: null,
              promotion_filt: 0,
              shop_id: "0",
              price: "38.60",
              dd_sale_price: "38.60",
              exclusive_price: "0.00",
              real_dd_sale_price: "38.60",
              promo_sale_price: "0.00",
              activity_price: "0.00",
              readable: false,
              book_id: 0,
              is_ebook: 0,
              ebook_sub_type1: "0",
              is_has_ebook: "1",
              ebook_product_id: "1901274191",
              user_behavior: 0,
              stock_desc: "",
              ebook_price: 0,
              ebook_dd_price: "34",
              show_ebook_flag: "1",
              cat_paths: "01.03.30.00.00.00",
              high_common_rate: "100.0",
              is_publication: "1",
              publisher: "人民文学出版社",
              publish_date: "2021-04-01",
              original_price: "56.00",
              is_overseas: "0",
              activity_type: -1,
              word_highlight_keys: [
                {
                  word: "一把刀",
                  keys: [0, 3],
                },
                {
                  word: "千个字",
                  keys: [4, 7],
                },
              ],
              image_url: "https://img3m6.ddimg.cn/65/29/29223776-1_h_9.jpg",
              product_url:
                "http://product.m.dangdang.com/29223776.html?t=1632297124",
              pre_sale: "0",
              presale_start_date: "1970-01-01 08:00:00",
              presale_end_date: "1970-01-01 08:00:00",
              presale_rank_num: "0",
              add_cart_button_enabled: 1,
              label_type: "加价购",
              label_type_id: "promotion:28",
              is_catalog_product: "0",
              is_yb_product: false,
              discount_icon_title: "",
              exclusive_spare_price: "0.00",
              has_ebook: 1,
              is_wished: "0",
              show_dangdangsale: 1,
              product_tags: [
                {
                  name: "自营",
                  type: 0,
                },
                {
                  name: "券",
                  type: 1,
                },
              ],
            },
            {
              id: "28992419",
              trace_id:
                "product_trace=00000000614ae17000c9a8740000000001ba63a3",
              stock: 1,
              total_review_count: "593551",
              score: 5,
              stars: {
                full_star: 5,
                has_half_star: false,
              },
              name: "蛤蟆先生去看心理医生（年销200万册！英国经典心理咨询入门书，知名心理学家李松蔚强烈推荐）",
              subname:
                "入围《新京报》、豆瓣2020年度图书榜单；英国亚马逊五星评分、授权10个语言版本，自1997年起长销至今。童话版《自卑与超越》，将心理学知识巧妙融入故事情节。",
              authorname: "罗伯特·戴博德，果麦文化 出品",
              promotype: null,
              promotion_filt: 0,
              shop_id: "0",
              price: "26.00",
              dd_sale_price: "26.00",
              exclusive_price: "0.00",
              real_dd_sale_price: "26.00",
              promo_sale_price: "0.00",
              activity_price: "0.00",
              readable: false,
              book_id: 0,
              is_ebook: 0,
              ebook_sub_type1: "0",
              is_has_ebook: "1",
              ebook_product_id: "1901260883",
              user_behavior: 0,
              stock_desc: "",
              ebook_price: 0,
              ebook_dd_price: "18.99",
              show_ebook_flag: "1",
              cat_paths: "01.31.04.00.00.00",
              high_common_rate: "100.0",
              is_publication: "1",
              publisher: "天津人民出版社",
              publish_date: "2020-07-01",
              original_price: "38.00",
              is_overseas: "0",
              activity_type: -1,
              word_highlight_keys: [
                {
                  word: "蛤蟆先生去看心理医生",
                  keys: [0, 10],
                },
              ],
              image_url: "https://img3m9.ddimg.cn/71/33/28992419-1_h_44.jpg",
              product_url:
                "http://product.m.dangdang.com/28992419.html?t=1632297329",
              pre_sale: "0",
              presale_start_date: "2015-01-01 00:00:00",
              presale_end_date: "2030-01-01 00:00:00",
              presale_rank_num: "0",
              add_cart_button_enabled: 1,
              label_type: "加价购",
              label_type_id: "promotion:28",
              is_catalog_product: "0",
              shop_link_url: "ddshop://id=282",
              shop_name: "果麦文化传媒股份有限公司",
              is_yb_product: false,
              discount_icon_title: "",
              exclusive_spare_price: "0.00",
              has_ebook: 1,
              is_wished: "0",
              show_dangdangsale: 1,
              product_tags: [
                {
                  name: "自营",
                  type: 0,
                },
                {
                  name: "券",
                  type: 1,
                },
              ],
            },
          ],
        },
        {
          cateId: 2,
          cateName: "新书上架",
          detail: [
            {
              id: "29287982",
              trace_id:
                "product_trace=00000000614ae1970068081d0000000001bee62e",
              stock: 1,
              total_review_count: "16",
              score: 5,
              stars: {
                full_star: 5,
                has_half_star: false,
              },
              name: "穿越时间的价值：看得准、守得稳、拿得住的投资逻辑",
              subname:
                "投资本质是把认知变现，用时间套利！深度解读民生板块、科技板块、新能源板块、金融板块！?真实投资案例与数据，让读者时间掌握投资动态。通过复利+时间创造高额收益。",
              authorname: "林徐峰",
              promotype: null,
              promotion_filt: 0,
              shop_id: "0",
              price: "34.00",
              dd_sale_price: "34.00",
              exclusive_price: "0.00",
              real_dd_sale_price: "48.90",
              promo_sale_price: "0.00",
              activity_price: "0.00",
              readable: false,
              book_id: 0,
              is_ebook: 0,
              ebook_sub_type1: "0",
              is_has_ebook: "1",
              ebook_product_id: "1901275819",
              user_behavior: 0,
              stock_desc: "",
              ebook_price: 0,
              ebook_dd_price: "20.4",
              show_ebook_flag: "1",
              cat_paths: "01.24.13.00.00.00",
              high_common_rate: "100.0",
              is_publication: "1",
              publisher: "民主与建设出版社",
              publish_date: "2021-07-01",
              original_price: "68.00",
              is_overseas: "0",
              activity_type: -1,
              word_highlight_keys: [
                {
                  word: "穿越时间的价值",
                  keys: [0, 7],
                },
              ],
              image_url: "https://img3m2.ddimg.cn/20/3/29287982-1_h_7.jpg",
              product_url:
                "http://product.m.dangdang.com/29287982.html?t=1632297368",
              pre_sale: "0",
              presale_start_date: "1970-01-01 08:00:00",
              presale_end_date: "1970-01-01 08:00:00",
              presale_rank_num: "0",
              add_cart_button_enabled: 1,
              label_type: "限时抢",
              label_type_id: "promotion:102",
              is_catalog_product: "0",
              shop_link_url: "ddshop://id=631",
              shop_name: "北京联合天畅文化传播有限公司",
              is_yb_product: false,
              discount_icon_title: "",
              exclusive_spare_price: "0.00",
              has_ebook: 1,
              is_wished: "0",
              show_dangdangsale: 1,
              product_tags: [
                {
                  name: "自营",
                  type: 0,
                },
                {
                  name: "新品",
                  type: 0,
                },
                {
                  name: "券",
                  type: 1,
                },
                {
                  name: "限时抢",
                  type: 1,
                },
              ],
            },
            {
              id: "29288461",
              trace_id:
                "product_trace=00000000614ae1ba00c9d21b0000000001bee80d",
              stock: 1,
              total_review_count: "81",
              score: 5,
              stars: {
                full_star: 5,
                has_half_star: false,
              },
              name: "成长不再烦恼·让习惯成自然 第一辑（全8册，附赠8册家庭教育指导手册）",
              subname:
                "花婆婆·方素珍、百班千人幼儿阅读研究院院长·孙莉莉、《中国教育报》副编审·张贵勇联合推荐。26位幼儿教育和儿童心理研究者共同创作，附赠家庭教育指导手册，解决孩子成长中40个关键问题",
              authorname:
                "(韩)金宝娜等著 (韩)尹贞珠等绘 (韩)孙淇 徐丽红 王正丽译;",
              promotype: null,
              promotion_filt: 0,
              shop_id: "0",
              price: "119.00",
              dd_sale_price: "119.00",
              exclusive_price: "0.00",
              real_dd_sale_price: "167.30",
              promo_sale_price: "0.00",
              activity_price: "0.00",
              readable: false,
              book_id: 0,
              is_ebook: 0,
              ebook_sub_type1: "0",
              is_has_ebook: null,
              ebook_product_id: null,
              user_behavior: 0,
              stock_desc: "",
              ebook_price: "0.00",
              ebook_dd_price: "0.00",
              cat_paths: "01.41.70.01.02.00",
              high_common_rate: "100.0",
              is_publication: "1",
              publisher: "世界图书出版公司",
              publish_date: "2021-07-01",
              original_price: "239.00",
              is_overseas: "0",
              activity_type: -1,
              word_highlight_keys: [
                {
                  word: "成长不再烦恼",
                  keys: [0, 6],
                },
              ],
              image_url: "https://img3m1.ddimg.cn/4/1/29288461-1_h_44.jpg",
              product_url:
                "http://product.m.dangdang.com/29288461.html?t=1632297402",
              pre_sale: "0",
              presale_start_date: "2021-08-17 09:20:30",
              presale_end_date: "2030-01-01 00:00:00",
              presale_rank_num: "0",
              add_cart_button_enabled: 1,
              label_type: "限时抢",
              label_type_id: "promotion:102",
              is_catalog_product: "0",
              is_yb_product: false,
              discount_icon_title: "",
              exclusive_spare_price: "0.00",
              has_ebook: 0,
              is_wished: "0",
              show_dangdangsale: 1,
              product_tags: [
                {
                  name: "自营",
                  type: 0,
                },
                {
                  name: "新品",
                  type: 0,
                },
                {
                  name: "券",
                  type: 1,
                },
                {
                  name: "限时抢",
                  type: 1,
                },
              ],
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  border-radius: 10px 10px 0px 0px;
  height: 130px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  margin-bottom: 1px;
  div {
    width: 49.9%;
    padding: 12px 12px 10px 12px;
    box-sizing: border-box;
    background-color: white;
    h4 {
      margin-bottom: 17px;
      color: #3f1001;
      i {
        font-size: 13px;
      }
    }
    ul {
      width: 100%;
      display: flex;
      li {
        flex: 0 0 50%;
        overflow: hidden;
        img {
          width: 55px;
          height: 55px;
          margin-bottom: 5px;
        }
        p {
          // width: 100%;
          width: 100%;
          font-size: 11px;
          color: #818da1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>